<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        .box{width:100px;height:100px;background: red;position: absolute;left:0;top:50px;}
    </style>
</head>
<body>

    <input type="button" value="上" id="top">
    <input type="button" value="右" id="right">
    <input type="button" value="下" id="bottom">
    <input type="button" value="左" id="left">

    <div class="box"></div>

</body>
<script>

    var oLeft = document.getElementById("left")
    var oTop = document.getElementById("top")
    var oRight = document.getElementById("right")
    var oBottom = document.getElementById("bottom")
    var oBox = document.querySelector(".box")

    oLeft.onclick = function(){
        oBox.style.left = oBox.offsetLeft - 10 + "px";
    }
    oTop.onclick = function(){
        oBox.style.top = oBox.offsetTop - 10 + "px";
    }
    oRight.onclick = function(){
        oBox.style.left = oBox.offsetLeft + 10 + "px";
    }
    oBottom.onclick = function(){
        oBox.style.top = oBox.offsetTop + 10 + "px";
    }

    // 一次性改变位置，直接写死，给具体的值
    
    // 持续改变，获取当前值，在当前值的基础上改变

    // 获取当前值

    
</script>
</html>